<template>
    <div class="menu">
        <div class="menu-list">
            <ul class="left">
                <li v-for="item in navList" :key="item.id" @click="getData(item.id)">{{item.title}}</li>
            </ul>
            <div class="right">
                <product v-for="(item,i) in curProduct" :key="i"
                    :title="item.title"
                    :price="item.price"
                    :id="item.id"
                    :num="item.num"
                    @choose="choose"
                ></product>
            </div>
        </div>
        <c-dialog v-show="status" :obj="chooseObj" @count="count" @close="status=false"></c-dialog>
    </div>
</template>

<script>
import product from '../components/product'
import cDialog from '../components/dialog'
export default {
    data(){
        return {
            navList:[],
            curProduct:[],
            chooseObj:{},
            status:false,
            buyList:JSON.parse(window.localStorage.getItem('buyList')) || []
        }
    },
    created(){
        this.$http.get('/api/nav').then(res => {
            if(res.data.code === 1){
                this.navList = res.data.data;
                this.getData(res.data.data[0].id);
            }
        })
    },
    methods:{
        getData(type){
            this.$http.get(`/api/product?type=${type}`).then(res => {
                if(res.data.code === 1){
                    this.curProduct = res.data.data.map(item => {
                        item.num = 0;
                        this.buyList.forEach(bItem => {
                            if(bItem.id === item.id){
                                item.num = bItem.num
                            }
                        })
                        return item
                    });
                }
            })
        },
        choose(id){
            this.status = true;
            let index = this.curProduct.findIndex(item => item.id === id);
            this.chooseObj = this.curProduct[index];
        },
        count(num,id){
            let target = this.curProduct.find(item => item.id === id);
            let buyInd = this.buyList.findIndex(item => item.id === id);
            target.num = num;

            if(buyInd != -1){
                this.buyList[buyInd].num = num;
            }else{
                this.buyList.push(target);
            }
            window.localStorage.setItem('buyList',JSON.stringify(this.buyList));
        }
    },
    components:{
        product,
        cDialog
    }
}
</script>

<style lang="scss">
    .menu{
        width:100%;
        height:100%;
        .menu-list{
            width:100%;
            height:100%;
            display: flex;
            .left{
                width:90px;
                height:100%;
                border-right:1px solid gray;
                li{
                    width:100%;
                    height:44px;
                    border-bottom:1px solid gray;
                }
            }
            .right{
                flex:1;
                height:100%;
            }
        }
    }
</style>

